<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语词汇学习</title>
    <link rel="stylesheet" type="text/css" href="/css/word_practice.css">
    <script src="/js/word_practice.js"></script>
</head>
<body>
<input type="hidden" id="userId" th:value="${session.user.id}">
<div class="main-container">
    <div class="categories-sidebar">
        <h2>词汇分类</h2>
        <div class="categories-container" id="categories">
            <div class="loading">加载分类中...</div>
        </div>

        <button class="category-btn" id="review-mistakes-btn">复习错词</button>
        <div class="timer-container">
            <h2>测试时间:</h2>
            <span id="timer">00:00</span>
        </div>
    </div>

    <div class="content-area">
        <div class="container">
            <div class="top-right-controls">
                <a th:href="@{/api/words/English_test_home}" class="home-button">返回主页</a>
            </div>
            <div class="mode-selector">
                <button class="mode-btn active" id="study-mode-btn">学习模式</button>
                <button class="mode-btn" id="quiz-mode-btn">测试模式</button>
            </div>

            <div id="word-viewer" class="hidden">

                <div class="word-module" id="word-module">
                    <div class="word-display" id="word-card">
                        <div class="word-header">
                            <div class="word-title" id="word-english">单词</div>
                            <div class="word-category" id="word-category">分类</div>
                        </div>
                        <div class="word-details">
                            <div class="word-pos hidden" id="word-pos"></div>
                            <div class="word-definition hidden" id="word-definition"></div>
                            <div class="word-example hidden" id="word-example"></div>

                            <div id="quiz-container" class="hidden">
                                <div class="options-container" id="options-container"></div>
                                <div class="result-message" id="result-message"></div>
                            </div>
                            <div class="word-controls" id="study-controls">
                                <button class="word-control-btn show" id="show-btn">显示释义</button>
                                <button class="word-control-btn" id="prev-btn">上一个</button>
                                <button class="word-control-btn" id="next-btn">下一个</button>
                            </div>

                            <div class="word-controls hidden" id="quiz-controls">
                                <button class="word-control-btn" id="next-quiz-btn">下一题</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="progress" id="progress">0/0</div>
            </div>

            <div class="loading" id="words-placeholder">选择分类开始学习</div>
        </div>
    </div>
</div>

</body>
</html>